<template>
  <div class="person-container">
    <div class="left-content">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <transition name="slide-fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </keep-alive>
      </router-view>
    </div>
    <div class="right-navBar flex  flex-column">
      <div v-for="item in tabList" :key="item.id" @click="handleItem(item.id)">
        <div class="nav-item" :class="item.id === activeItem ? 'item-active ' : ''"
          v-if="!(item.id == 5 && useUserStore().userInfo.role == 1)">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import router from '@/router';
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user';
const tabList = ref([
  {
    title: '我的分数详情',
    id: 0,
  },
  // {
  //   title: '查看审批进度',
  //   id: 2,
  // },
  {
    title: '已参加的社团',
    id: 3,
  },
  {
    title: '已参加的活动',
    id: 4,
  },
  {
    title: '申请创建社团',
    id: 5,
  },
])
let activeItem = ref(0)
const handleItem = (id: number) => {
  activeItem.value = id
  switch (id) {
    case 0:
      router.push('/student/personCenter/myScore')
      break;
    case 2:
      router.push('/student/personCenter/checkApply')
      break;
    case 3:
      router.push('/student/personCenter/joinSociety')
      break;
    case 4:
      router.push('/student/personCenter/joinActivity')
      break;
    case 5:
      router.push('/student/personCenter/createSociety')
      break;
  }
}
</script>
<style lang="scss" scoped>
.person-container {
  width: 100%;
  display: grid;
  grid-template-columns: 6.5fr 1fr;
  gap: 2rem;


  .left-content {
    padding: 2rem;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    height: 100% !important;
  }

  .right-navBar {
    background-color: #fff;
    border-radius: 2rem;
    height: 30rem;
    justify-content: space-around;
    align-items: center;
    padding: 1.5rem 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    letter-spacing: 0.2rem;

    .nav-item {
      height: 3.6rem;
      line-height: 3.6rem;
      font-size: 1.6rem;
      font-weight: 700;
      color: #909399;

      &:hover {
        color: $green;
        cursor: pointer;
      }
    }

    .item-active {
      color: $green;
      border-bottom: 2px solid $green;
    }
  }
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .5s ease;
}

.slide-fade-leave-active {
  transition: all .5s ease;
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
  {
  transform: translateX(-100px);
  opacity: 0;
}
</style>

